<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" top="0" :up="upOption">
			<view class="p30">
				<block v-for="(item,index) in monthData">
				<view class="info-box active">
					<view class="flex-box mb40 plr30">
						<view class="fs36 col10 flex-grow-1">{{item.name}}</view>
						<view class="fs26 col89" @click="searchMore(index)">查看更多+</view>
					</view>
					<view class="flex-box tc">
						<view class="flex-grow-1">
							<view class="mb10 " :class="index==0?'col-price':''">
								<text class="fs26">¥</text>
								<text class="fs36">{{item.money}}</text>
							</view>
							<view class="fs26 col89">新增收益</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs36 mb10" :class="index==0?'col-price':''">
								{{item.rental_num}}
							</view>
							<view class="fs26 col89">新增房源</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs36 mb10" :class="index==0?'col-price':''">
								{{item.user_num}}
							</view>
							<view class="fs26 col89">新增客户</view>
						</view>
						<view class="flex-grow-1">
							<view class="fs36 mb10" :class="index==0?'col-price':''">
								{{item.view_num}}
							</view>
							<view class="fs26 col89">新增带看</view>
						</view>
					</view>

				</view>
				</block>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	const functions = require('../../../utils/functions.js');
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无会员卡安排哦' 
					}
				},
				monthData:{}
			}
		},
		methods: {
			upCallback(){
				this.fetchMonthData();
			},
			downCallback(){
				this.fetchMonthData();
			},
			fetchMonthData(){
				let that = this;
				functions.getAjaxData('/api/xiluhouse.money/broker_lessor_statistics', {}, function (res) {
					that.monthData = res.data;
				});
			},
			searchMore(index){
				let date = this.monthData[index].date;
				uni.navigateTo({
					url: "/pages/rental/more_detail/more_detail?date="+date
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.info-box {
		margin: 0 0 30rpx;
		padding: 30rpx 0 40rpx;
		box-shadow: 0 0 30rpx 5rpx rgba(184, 189, 202, 0.2);
		border-radius: 20rpx;
		background: #fff;
	}

	.info-box.active {
		background: #FFFFFF linear-gradient(180deg, rgba(0, 145, 255, 0.05) 0%, rgba(0, 145, 255, 0) 100%);
	}
</style>
